<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华为全球商城管理后台 - HUAWEI Admin Dashboard</title>
    <style>
        /* 顶部导航栏：固定在顶部 */
.admin-header {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    color: white;
    padding: 15px 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* 新增：固定定位 */
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    z-index: 1000; /* 确保导航栏在最上层，不被其他元素遮挡 */
}

/* 调整后续布局：避免内容被固定导航栏遮挡 */
/* 1. 侧边栏：顶部留出导航栏高度（假设导航栏高度约70px） */
.admin-sidebar {
    background: white;
    box-shadow: 4px 0 20px rgba(0,0,0,0.05);
    overflow-y: auto;
    margin-top: 70px; /* 与导航栏高度一致，避免被遮挡 */
}

/* 2. 主内容区：顶部留出导航栏高度 */
.admin-main {
    padding: 30px;
    overflow-y: auto;
    margin-top: 70px; /* 与导航栏高度一致，避免被遮挡 */
}

/* 3. 网格布局调整：因为header固定后，不再占用grid布局空间 */
.admin-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    grid-template-rows: 1fr; /* 原auto（header高度）改为1fr，仅保留main和sidebar的高度 */
    min-height: 100vh;
    margin-top: 0; /* 清除原有间距 */
}
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: #f8fafc;
            color: #1f2937;
            line-height: 1.6;
        }

        /* Layout 基础布局 */
        .admin-layout {
            display: grid;
            grid-template-columns: 280px 1fr;
            grid-template-rows: auto 1fr;
            min-height: 100vh;
        }

        /* Header 顶部导航 */
        .admin-header {
            grid-column: 1 / -1;
            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
            color: white;
            padding: 15px 30px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo::before {
            content: "⚙️";
            font-size: 20px;
        }

        .breadcrumb {
            font-size: 14px;
            opacity: 0.8;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .notification-bell {
            position: relative;
            padding: 10px;
            background: rgba(255,255,255,0.2);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .notification-bell:hover {
            background: rgba(255,255,255,0.3);
        }

        .notification-count {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #ef4444;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .user-menu {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            padding: 8px 16px;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .user-menu:hover {
            background: rgba(255,255,255,0.2);
        }

        .user-avatar {
            width: 32px;
            height: 32px;
            background: rgba(255,255,255,0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Sidebar 侧边菜单 */
        .admin-sidebar {
            background: white;
            box-shadow: 4px 0 20px rgba(0,0,0,0.05);
            overflow-y: auto;
        }

        .sidebar-menu {
            padding: 20px 0;
        }

        .menu-section {
            margin-bottom: 30px;
        }

        .menu-section-title {
            padding: 10px 20px;
            font-size: 12px;
            font-weight: 600;
            color: #9ca3af;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .menu-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 15px 20px;
            color: #4b5563;
            text-decoration: none;
            transition: all 0.3s ease;
            border-right: 3px solid transparent;
            position: relative;
        }

        .menu-item:hover,
        .menu-item.active {
            background: #eff6ff;
            color: #3b82f6;
            border-right-color: #3b82f6;
        }

        .menu-icon {
            font-size: 18px;
            width: 20px;
            text-align: center;
        }

        .menu-badge {
            margin-left: auto;
            background: #ef4444;
            color: white;
            border-radius: 12px;
            padding: 2px 8px;
            font-size: 11px;
            font-weight: 600;
        }

        /* Main Content 主内容区 */
        .admin-main {
            padding: 30px;
            overflow-y: auto;
        }

        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }

        .page-title {
            font-size: 32px;
            font-weight: 700;
            color: #1f2937;
        }

        .page-actions {
            display: flex;
            gap: 15px;
        }

        /* Button 按钮样式 */
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-primary {
            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
            color: white;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #1d4ed8, #1e40af);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
        }

        .btn-outline {
            background: white;
            border: 2px solid #3b82f6;
            color: #3b82f6;
        }

        .btn-outline:hover {
            background: #3b82f6;
            color: white;
        }

        .btn-success {
            background: #10b981;
            color: white;
        }

        .btn-success:hover {
            background: #059669;
        }

        .btn-warning {
            background: #f59e0b;
            color: white;
        }

        .btn-warning:hover {
            background: #d97706;
        }

        .btn-danger {
            background: #ef4444;
            color: white;
        }

        .btn-danger:hover {
            background: #dc2626;
        }

        .btn-small {
            padding: 6px 12px;
            font-size: 12px;
        }

        /* Content Sections 内容模块 */
        .content-section {
            display: none;
        }

        .content-section.active {
            display: block;
        }

        /* Stats Cards 统计卡片 */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }

        .stat-card {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.12);
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background: rgba(59, 130, 246, 0.1);
            border-radius: 50%;
            transform: translate(30px, -30px);
        }

        .stat-icon {
            font-size: 36px;
            margin-bottom: 15px;
            position: relative;
            z-index: 1;
        }

        .stat-value {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 5px;
            color: #1f2937;
            position: relative;
            z-index: 1;
        }

        .stat-label {
            color: #6b7280;
            font-size: 14px;
            margin-bottom: 10px;
            position: relative;
            z-index: 1;
        }

        .stat-trend {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 12px;
            font-weight: 500;
            position: relative;
            z-index: 1;
        }

        .stat-trend.up {
            color: #10b981;
        }

        .stat-trend.down {
            color: #ef4444;
        }

        /* Data Tables 数据表格 */
        .data-table-container {
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.08);
            overflow: hidden;
            margin-bottom: 30px;
        }

        .table-header {
            padding: 25px 30px;
            border-bottom: 1px solid #f3f4f6;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .table-title {
            font-size: 20px;
            font-weight: 600;
            color: #1f2937;
        }

        .table-filters {
            display: flex;
            gap: 15px;
        }

        .filter-input {
            padding: 8px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 14px;
        }

        .filter-input:focus {
            outline: none;
            border-color: #3b82f6;
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
        }

        .data-table th,
        .data-table td {
            text-align: left;
            padding: 15px 20px;
            border-bottom: 1px solid #f3f4f6;
        }

        .data-table th {
            background: #f8fafc;
            font-weight: 600;
            color: #374151;
            font-size: 14px;
        }

        .data-table tbody tr:hover {
            background: #f8fafc;
        }

        /* Status Badge 状态标签 */
        .status-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }

        .status-success {
            background: #d1fae5;
            color: #065f46;
        }

        .status-warning {
            background: #fef3c7;
            color: #92400e;
        }

        .status-danger {
            background: #fee2e2;
            color: #991b1b;
        }

        .status-info {
            background: #dbeafe;
            color: #1e40af;
        }

        /* Forms 表单样式 */
        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #374151;
        }

        .form-input,
        .form-select,
        .form-textarea {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        .form-input:focus,
        .form-select:focus,
        .form-textarea:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        /* Charts Container 图表容器 */
        .charts-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 40px;
        }

        .chart-container {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.08);
        }

        .chart-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 20px;
            color: #1f2937;
        }

        .chart-placeholder {
            height: 300px;
            background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            opacity: 0.5;
        }

        /* Alert Messages 提示框 */
        .alert {
            padding: 15px 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .alert-success {
            background: #d1fae5;
            color: #065f46;
            border-left: 4px solid #10b981;
        }

        .alert-warning {
            background: #fef3c7;
            color: #92400e;
            border-left: 4px solid #f59e0b;
        }

        .alert-danger {
            background: #fee2e2;
            color: #991b1b;
            border-left: 4px solid #ef4444;
        }

        .alert-info {
            background: #dbeafe;
            color: #1e40af;
            border-left: 4px solid #3b82f6;
        }

        /* Stock Management 库存管理特有样式 */
        .stock-level {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .stock-bar {
            height: 6px;
            flex-grow: 1;
            border-radius: 3px;
            background: #e5e7eb;
            overflow: hidden;
        }

        .stock-fill {
            height: 100%;
        }

        .stock-fill.high {
            background: #10b981;
        }

        .stock-fill.medium {
            background: #f59e0b;
        }

        .stock-fill.low {
            background: #ef4444;
        }

        /* Pagination 分页控件 */
        .pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            border-top: 1px solid #f3f4f6;
        }

        .pagination-info {
            font-size: 14px;
            color: #6b7280;
        }

        .pagination-controls {
            display: flex;
            gap: 8px;
        }

        /* Modal 模态框 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.7);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 3000;
        }

        .modal-overlay.show {
            display: flex;
        }

        .modal {
            background: white;
            border-radius: 15px;
            padding: 30px;
            max-width: 600px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            animation: modalSlideIn 0.3s ease;
        }

        @keyframes modalSlideIn {
            from {
                transform: translateY(-30px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e5e7eb;
        }

        .modal-title {
            font-size: 20px;
            font-weight: 600;
        }

        .modal-close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #6b7280;
        }

        .modal-close:hover {
            color: #374151;
        }

        .modal-footer {
            margin-top: 30px;
            padding-top: 15px;
            border-top: 1px solid #e5e7eb;
            display: flex;
            justify-content: flex-end;
            gap: 15px;
        }

        /* Responsive Design 响应式适配 */
        @media (max-width: 1024px) {
            .admin-layout {
                grid-template-columns: 1fr;
                grid-template-rows: auto auto 1fr;
            }

            .admin-sidebar {
                order: 2;
                height: auto;
                box-shadow: none;
                border-top: 1px solid #e5e7eb;
            }

            .admin-main {
                order: 3;
                padding: 20px;
            }

            .stats-grid {
                grid-template-columns: 1fr;
            }

            .charts-grid {
                grid-template-columns: 1fr;
            }

            .form-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .sidebar-menu {
                display: flex;
                overflow-x: auto;
                padding: 10px;
            }

            .menu-section {
                display: flex;
                gap: 10px;
                margin-bottom: 0;
                white-space: nowrap;
            }

            .menu-section-title {
                display: none;
            }

            .menu-item {
                flex-direction: column;
                text-align: center;
                min-width: 80px;
                padding: 10px;
                border-right: none;
                border-bottom: 3px solid transparent;
            }

            .menu-item:hover,
            .menu-item.active {
                border-right: none;
                border-bottom-color: #3b82f6;
            }

            .table-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }

            .table-filters {
                width: 100%;
                flex-wrap: wrap;
            }

            .filter-input {
                flex: 1;
                min-width: 150px;
            }
        }
    </style>
</head>
<body>
    <div class="admin-layout">
        <!-- 顶部导航栏 -->
         <header class="admin-header">
            <div class="header-left">
                <div class="logo">华为全球商城管理后台</div>
                <div class="breadcrumb" id="breadcrumb">控制台</div>
            </div>
            <div class="header-right">
                <div class="notification-bell">
                    🔔
                    <div class="notification-count">5</div>
                </div>
                <div class="user-menu">
                    <div class="user-avatar">👤</div>
                    <span>管理员</span>
                    <span>▼</span>
                </div>
                <!-- 新增：退出按钮 -->
                <button class="btn btn-danger" onclick="handleLogout()">
                    🚪 退出
                </button>
            </div>
        </header>

        <!-- 侧边菜单栏 -->
        <aside class="admin-sidebar">
            <nav class="sidebar-menu">
                <div class="menu-section">
                    <div class="menu-section-title">核心功能</div>
                    <a href="#" class="menu-item active" onclick="showSection('dashboard', this, '控制台')">
                        <span class="menu-icon">📊</span>
                        <span>控制台</span>
                    </a>
                    <a href="#" class="menu-item" onclick="showSection('products', this, '商品管理')">
                        <span class="menu-icon">📦</span>
                        <span>商品管理</span>
                    </a>
                    <a href="#" class="menu-item" onclick="showSection('inventory', this, '库存管理')">
                        <span class="menu-icon">📈</span>
                        <span>库存管理</span>
                        <span class="menu-badge">12</span>
                    </a>
                    <a href="#" class="menu-item" onclick="showSection('orders', this, '订单管理')">
                        <span class="menu-icon">🛒</span>
                        <span>订单管理</span>
                        <span class="menu-badge">3</span>
                    </a>
                </div>
                
                <div class="menu-section">
                    <div class="menu-section-title">运营监控</div>
                    <a href="#" class="menu-item" onclick="showSection('monitoring', this, '业务监控')">
                        <span class="menu-icon">📈</span>
                        <span>业务监控</span>
                    </a>
                    <a href="#" class="menu-item" onclick="showSection('reports', this, '数据报表')">
                        <span class="menu-icon">📋</span>
                        <span>数据报表</span>
                    </a>
                    <a href="#" class="menu-item" onclick="showSection('health', this, '系统健康')">
                        <span class="menu-icon">💚</span>
                        <span>系统健康</span>
                    </a>
                </div>
                
                <div class="menu-section">
                    <div class="menu-section-title">系统管理</div>
                    <a href="#" class="menu-item" onclick="showSection('backup', this, '备份管理')">
                        <span class="menu-icon">💾</span>
                        <span>备份管理</span>
                    </a>
                    <a href="#" class="menu-item" onclick="showSection('disaster', this, '灾难演练')">
                        <span class="menu-icon">🚨</span>
                        <span>灾难演练</span>
                    </a>
                    <a href="#" class="menu-item" onclick="showSection('settings', this, '系统设置')">
                        <span class="menu-icon">⚙️</span>
                        <span>系统设置</span>
                    </a>
                </div>
            </nav>
        </aside>

        <!-- 主内容区域 -->
        <main class="admin-main">
            <!-- 1. 控制台模块 -->
            <section id="dashboard" class="content-section active">
                <div class="page-header">
                    <h1 class="page-title">控制台</h1>
                    <div class="page-actions">
                        <button class="btn btn-outline">📊 生成报告</button>
                        <button class="btn btn-primary">🔄 刷新数据</button>
                    </div>
                </div>

                <!-- 统计卡片 -->
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-icon">💰</div>
                        <div class="stat-value">¥2,847,392</div>
                        <div class="stat-label">今日销售额</div>
                        <div class="stat-trend up">
                            <span>↗</span>
                            <span>+15.3% 较昨日</span>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">📦</div>
                        <div class="stat-value">1,247</div>
                        <div class="stat-label">今日订单数</div>
                        <div class="stat-trend up">
                            <span>↗</span>
                            <span>+8.7% 较昨日</span>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">👥</div>
                        <div class="stat-value">23,891</div>
                        <div class="stat-label">在线用户数</div>
                        <div class="stat-trend down">
                            <span>↘</span>
                            <span>-3.2% 较昨日</span>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">⚠️</div>
                        <div class="stat-value">156</div>
                        <div class="stat-label">库存预警</div>
                        <div class="stat-trend up">
                            <span>⚠️</span>
                            <span>需要补货</span>
                        </div>
                    </div>
                </div>

                <!-- 最新活动表格 -->
                <div class="data-table-container">
                    <div class="table-header">
                        <h2 class="table-title">最新活动</h2>
                        <div class="table-filters">
                            <input type="text" class="filter-input" placeholder="搜索活动..." oninput="filterActivities(this.value)">
                            <button class="btn btn-outline btn-small">筛选</button>
                        </div>
                    </div>
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>时间</th>
                                <th>类型</th>
                                <th>描述</th>
                                <th>状态</th>
                                <th>操作人</th>
                            </tr>
                        </thead>
                        <tbody id="activitiesTableBody">
                            <tr>
                                <td>14:35:22</td>
                                <td>订单处理</td>
                                <td>订单 #HW20241214001 已发货</td>
                                <td><span class="status-badge status-success">成功</span></td>
                                <td>系统自动</td>
                            </tr>
                            <tr>
                                <td>14:28:15</td>
                                <td>库存更新</td>
                                <td>Mate 70 Pro 512GB 库存+100台</td>
                                <td><span class="status-badge status-info">处理中</span></td>
                                <td>张管理员</td>
                            </tr>
                            <tr>
                                <td>14:15:43</td>
                                <td>系统监控</td>
                                <td>数据库连接池使用率 85%</td>
                                <td><span class="status-badge status-warning">警告</span></td>
                                <td>监控系统</td>
                            </tr>
                            <tr>
                                <td>13:58:29</td>
                                <td>用户注册</td>
                                <td>新用户注册：user_847392</td>
                                <td><span class="status-badge status-success">成功</span></td>
                                <td>系统自动</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 图表区域 -->
                <!-- 图表区域 -->
<div class="charts-grid">
    <div class="chart-container">
        <h3 class="chart-title">销售趋势 (最近7天)</h3>
        <canvas id="salesChart"></canvas>
    </div>
    <div class="chart-container">
        <h3 class="chart-title">订单状态分布</h3>
        <canvas id="ordersChart"></canvas>
    </div>
</div>

<!-- 引入 Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // 初始化销售趋势折线图
    const salesCtx = document.getElementById('salesChart').getContext('2d');
    let salesChart = new Chart(salesCtx, {
        type: 'line',
        data: {
            labels: ['周一','周二','周三','周四','周五','周六','周日'],
            datasets: [{
                label: '销售额 (元)',
                data: [2847392, 2650000, 2900000, 3000000, 2800000, 3100000, 2950000],
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 2,
                fill: true,
                tension: 0.3
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false, // 关闭默认比例，让图表自适应容器大小
            plugins: {
                legend: { display: true }
            },
            scales: {
                y: { beginAtZero: false }
            }
        }
    });

    // 初始化订单状态分布饼图
    const ordersCtx = document.getElementById('ordersChart').getContext('2d');
    let ordersChart = new Chart(ordersCtx, {
        type: 'pie',
        data: {
            labels: ['已完成', '进行中', '已取消'],
            datasets: [{
                data: [800, 300, 147],
                backgroundColor: [
                    'rgba(75, 192, 192, 0.7)',
                    'rgba(255, 206, 86, 0.7)',
                    'rgba(255, 99, 132, 0.7)'
                ],
                borderColor: [
                    'rgba(75, 192, 192, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(255, 99, 132, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { position: 'bottom' }
            }
        }
    });

    // 刷新数据函数（随机生成示例数据）
    function refreshCharts() {
        // 销售趋势随机数据
        salesChart.data.datasets[0].data = Array.from({length: 7}, () => Math.floor(2500000 + Math.random()*700000));
        salesChart.update();

        // 订单状态随机数据
        const totalOrders = 1247;
        const completed = Math.floor(Math.random() * 900);
        const inProgress = Math.floor(Math.random() * (totalOrders - completed));
        const cancelled = totalOrders - completed - inProgress;
        ordersChart.data.datasets[0].data = [completed, inProgress, cancelled];
        ordersChart.update();
    }

    // 绑定刷新按钮
    document.querySelector('.btn-primary').addEventListener('click', refreshCharts);
</script>

<style>
.charts-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.chart-container {
    flex: 1 1 600px; /* 放大图表容器 */
    height: 400px;    /* 高度增加 */
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.chart-title {
    text-align: center;
    margin-bottom: 10px;
    font-size: 18px;
}
</style>

            </section>

            <!-- 2. 商品管理模块 -->
            <section id="products" class="content-section">
                <div class="page-header">
                    <h1 class="page-title">商品管理</h1>
                    <div class="page-actions">
                        <button class="btn btn-outline">📤 导出数据</button>
                        <button class="btn btn-success" onclick="showModal('addProductModal')">➕ 添加商品</button>
                    </div>
                </div>

                <!-- 商品库存状态提示 -->
                <div class="alert alert-info">
                    <span>ℹ️</span>
                    <span>当前共有 <strong>156</strong> 款商品，其中 <strong>12</strong> 款需要补货，<strong>3</strong> 款库存预警。</span>
                </div>

                <!-- 商品列表表格 -->
                <div class="data-table-container">
                    <div class="table-header">
                        <h2 class="table-title">商品列表</h2>
                        <div class="table-filters">
                            <input type="text" class="filter-input" placeholder="搜索商品名称或SKU..." oninput="filterProducts(this.value)">
                            <select class="filter-input" onchange="filterByCategory(this.value)">
                                <option value="all">全部分类</option>
                                <option value="手机">手机</option>
                                <option value="平板">平板</option>
                                <option value="笔记本">笔记本</option>
                                <option value="穿戴设备">穿戴设备</option>
                            </select>
                            <select class="filter-input" onchange="filterByStatus(this.value)">
                                <option value="all">全部状态</option>
                                <option value="在售">在售</option>
                                <option value="下架">下架</option>
                                <option value="缺货">缺货</option>
                            </select>
                        </div>
                    </div>

                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>商品信息</th>
                                <th>SKU</th>
                                <th>分类</th>
                                <th>价格</th>
                                <th>库存</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="productTableBody">
                            <!-- 手机类商品 -->
                            <tr data-category="手机" data-status="在售">
                                <td>
                                    <div style="display: flex; align-items: center; gap: 12px;">
                                        <div style="width: 50px; height: 50px; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center;">📱</div>
                                        <div>
                                            <div style="font-weight: 600;">HUAWEI Mate 70 Pro</div>
                                            <div style="font-size: 12px; color: #6b7280;">512GB / 星轮黑</div>
                                        </div>
                                    </div>
                                </td>
                                <td>HW-PHONE-001</td>
                                <td>手机</td>
                                <td>¥6,499</td>
                                <td>248</td>
                                <td><span class="status-badge status-success">在售</span></td>
                                <td>
                                    <button class="btn btn-outline btn-small" onclick="editProduct('HW-PHONE-001')">✏️ 编辑</button>
                                    <button class="btn btn-warning btn-small" onclick="changeStatus('HW-PHONE-001', '下架')">📥 下架</button>
                                </td>
                            </tr>
                            <tr data-category="手机" data-status="缺货">
                                <td>
                                    <div style="display: flex; align-items: center; gap: 12px;">
                                        <div style="width: 50px; height: 50px; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center;">📱</div>
                                        <div>
                                            <div style="font-weight: 600;">HUAWEI P70 Pro</div>
                                            <div style="font-size: 12px; color: #6b7280;">256GB / 雪域白</div>
                                        </div>
                                    </div>
                                </td>
                                <td>HW-PHONE-002</td>
                                <td>手机</td>
                                <td>¥5,999</td>
                                <td>0</td>
                                <td><span class="status-badge status-warning">缺货</span></td>
                                <td>
                                    <button class="btn btn-outline btn-small" onclick="editProduct('HW-PHONE-002')">✏️ 编辑</button>
                                    <button class="btn btn-success btn-small" onclick="restockProduct('HW-PHONE-002')">🔄 补货</button>
                                </td>
                            </tr>

                            <!-- 平板类商品 -->
                            <tr data-category="平板" data-status="在售">
                                <td>
                                    <div style="display: flex; align-items: center; gap: 12px;">
                                        <div style="width: 50px; height: 50px; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center;">📱</div>
                                        <div>
                                            <div style="font-weight: 600;">HUAWEI MatePad Pro 13.2</div>
                                            <div style="font-size: 12px; color: #6b7280;">512GB / 青山黛</div>
                                        </div>
                                    </div>
                                </td>
                                <td>HW-TABLET-001</td>
                                <td>平板</td>
                                <td>¥4,799</td>
                                <td>156</td>
                                <td><span class="status-badge status-success">在售</span></td>
                                <td>
                                    <button class="btn btn-outline btn-small" onclick="editProduct('HW-TABLET-001')">✏️ 编辑</button>
                                    <button class="btn btn-warning btn-small" onclick="changeStatus('HW-TABLET-001', '下架')">📥 下架</button>
                                </td>
                            </tr>

                            <!-- 笔记本类商品 -->
                            <tr data-category="笔记本" data-status="在售">
                                <td>
                                    <div style="display: flex; align-items: center; gap: 12px;">
                                        <div style="width: 50px; height: 50px; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center;">💻</div>
                                        <div>
                                            <div style="font-weight: 600;">HUAWEI MateBook X Pro 2024</div>
                                            <div style="font-size: 12px; color: #6b7280;">16GB+1TB / 皓月银</div>
                                        </div>
                                    </div>
                                </td>
                                <td>HW-LAPTOP-001</td>
                                <td>笔记本</td>
                                <td>¥8,999</td>
                                <td>89</td>
                                <td><span class="status-badge status-success">在售</span></td>
                                <td>
                                    <button class="btn btn-outline btn-small" onclick="editProduct('HW-LAPTOP-001')">✏️ 编辑</button>
                                    <button class="btn btn-warning btn-small" onclick="changeStatus('HW-LAPTOP-001', '下架')">📥 下架</button>
                                </td>
                            </tr>
                            <tr data-category="笔记本" data-status="下架">
                                <td>
                                    <div style="display: flex; align-items: center; gap: 12px;">
                                        <div style="width: 50px; height: 50px; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center;">💻</div>
                                        <div>
                                            <div style="font-weight: 600;">HUAWEI MateBook D 15</div>
                                            <div style="font-size: 12px; color: #6b7280;">16GB+512GB / 深空灰</div>
                                        </div>
                                    </div>
                                </td>
                                <td>HW-LAPTOP-002</td>
                                <td>笔记本</td>
                                <td>¥4,299</td>
                                <td>124</td>
                                <td><span class="status-badge status-danger">下架</span></td>
                                <td>
                                    <button class="btn btn-outline btn-small" onclick="editProduct('HW-LAPTOP-002')">✏️ 编辑</button>
                                    <button class="btn btn-success btn-small" onclick="changeStatus('HW-LAPTOP-002', '在售')">📤 上架</button>
                                </td>
                            </tr>

                            <!-- 穿戴设备类商品 -->
                            <tr data-category="穿戴设备" data-status="在售">
                                <td>
                                    <div style="display: flex; align-items: center; gap: 12px;">
                                        <div style="width: 50px; height: 50px; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center;">⌚</div>
                                        <div>
                                            <div style="font-weight: 600;">HUAWEI Watch GT 4</div>
                                            <div style="font-size: 12px; color: #6b7280;">46mm / 曜石黑</div>
                                        </div>
                                    </div>
                                </td>
                                <td>HW-WEARABLE-001</td>
                                <td>穿戴设备</td>
                                <td>¥1,599</td>
                                <td>302</td>
                                <td><span class="status-badge status-success">在售</span></td>
                                <td>
                                    <button class="btn btn-outline btn-small" onclick="editProduct('HW-WEARABLE-001')">✏️ 编辑</button>
                                    <button class="btn btn-warning btn-small" onclick="changeStatus('HW-WEARABLE-001', '下架')">📥 下架</button>
                                </td>
                            </tr>
                            <tr data-category="穿戴设备" data-status="预警">
                                <td>
                                    <div style="display: flex; align-items: center; gap: 12px;">
                                        <div style="width: 50px; height: 50px; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center;">🎧</div>
                                        <div>
                                            <div style="font-weight: 600;">HUAWEI FreeBuds Pro 3</div>
                                            <div style="font-size: 12px; color: #6b7280;">陶瓷白 / 无线充版</div>
                                        </div>
                                    </div>
                                </td>
                                <td>HW-WEARABLE-002</td>
                                <td>穿戴设备</td>
                                <td>¥1,299</td>
                                <td>18</td>
                                <td><span class="status-badge status-warning">库存预警</span></td>
                                <td>
                                    <button class="btn btn-outline btn-small" onclick="editProduct('HW-WEARABLE-002')">✏️ 编辑</button>
                                    <button class="btn btn-success btn-small" onclick="restockProduct('HW-WEARABLE-002')">🔄 补货</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <!-- 分页控件 -->
                    <div class="pagination">
                        <div class="pagination-info">
                            显示 <span style="color: #3b82f6; font-weight: 600;">1-7</span> 条，共 <span style="color: #3b82f6; font-weight: 600;">156</span> 条商品
                        </div>
                        <div class="pagination-controls">
                            <button class="btn btn-outline btn-small" disabled>← 上一页</button>
                            <button class="btn btn-primary btn-small" disabled>1</button>
                            <button class="btn btn-outline btn-small" onclick="changePage(2, 'product')">2</button>
                            <button class="btn btn-outline btn-small" onclick="changePage(3, 'product')">3</button>
                            <button class="btn btn-outline btn-small">...</button>
                            <button class="btn btn-outline btn-small" onclick="changePage(23, 'product')">23</button>
                            <button class="btn btn-outline btn-small" onclick="changePage(2, 'product')">下一页 →</button>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 3. 库存管理模块 -->
            <section id="inventory" class="content-section">
                <div class="page-header">
                    <h1 class="page-title">库存管理</h1>
                    <div class="page-actions">
                        <button class="btn btn-outline">📤 导出库存</button>
                        <button class="btn btn-success" onclick="showModal('bulkRestockModal')">📦 批量补货</button>
                    </div>
                </div>

                <!-- 库存预警提示 -->
                <div class="alert alert-warning">
                    <span>⚠️</span>
                    <span>当前有 <strong>12</strong> 款商品库存不足，<strong>3</strong> 款商品库存为零，请及时处理！</span>
                </div>

                <!-- 库存预警列表 -->
                <div class="data-table-container">
                    <div class="table-header">
                        <h2 class="table-title">库存预警列表</h2>
                        <div class="table-filters">
                            <input type="text" class="filter-input" placeholder="搜索商品名称或SKU..." oninput="filterInventory(this.value)">
                            <select class="filter-input" onchange="filterInventoryByCategory(this.value)">
                                <option value="all">全部分类</option>
                                <option value="手机">手机</option>
                                <option value="平板">平板</option>
                                <option value="笔记本">笔记本</option>
                                <option value="穿戴设备">穿戴设备</option>
                            </select>
                            <select class="filter-input" onchange="filterInventoryByLevel(this.value)">
                                <option value="all">全部库存级别</option>
                                <option value="out">库存为零</option>
                                <option value="low">库存不足</option>
                                <option value="medium">库存中等</option>
                            </select>
                        </div>
                    </div>

                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>商品信息</th>
                                <th>SKU</th>
                                <th>分类</th>
                                <th>当前库存</th>
                                <th>库存状态</th>
                                <th>上次补货</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="inventoryTableBody">
                            <tr data-category="手机" data-level="out">
                                <td>
                                    <div style="display: flex; align-items: center; gap: 12px;">
                                        <div style="width: 50px; height: 50px; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center;">📱</div>
                                        <div>
                                            <div style="font-weight: 600;">HUAWEI P70 Pro</div>
                                            <div style="font-size: 12px; color: #6b7280;">256GB / 雪域白</div>
                                        </div>
                                    </div>
                                </td>
                                <td>HW-PHONE-002</td>
                                <td>手机</td>
                                <td>0</td>
                                <td>
                                    <div class="stock-level">
                                        <span class="status-badge status-danger">库存为零</span>
                                        <div class="stock-bar">
                                            <div class="stock-fill low" style="width: 0%"></div>
                                        </div>
                                    </div>
                                </td>
                                <td>2024-09-10</td>
                                <td>
                                    <button class="btn btn-success btn-small" onclick="restockProduct('HW-PHONE-002')">🔄 补货</button>
                                </td>
                            </tr>
                            <tr data-category="穿戴设备" data-level="low">
                                <td>
                                    <div style="display: flex; align-items: center; gap: 12px;">
                                        <div style="width: 50px; height: 50px; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center;">🎧</div>
                                        <div>
                                            <div style="font-weight: 600;">HUAWEI FreeBuds Pro 3</div>
                                            <div style="font-size: 12px; color: #6b7280;">陶瓷白 / 无线充版</div>
                                        </div>
                                    </div>
                                </td>
                                <td>HW-WEARABLE-002</td>
                                <td>穿戴设备</td>
                                <td>18</td>
                                <td>
                                    <div class="stock-level">
                                        <span class="status-badge status-warning">库存不足</span>
                                        <div class="stock-bar">
                                            <div class="stock-fill low" style="width: 15%"></div>
                                        </div>
                                    </div>
                                </td>
                                <td>2024-09-15</td>
                                <td>
                                    <button class="btn btn-success btn-small" onclick="restockProduct('HW-WEARABLE-002')">🔄 补货</button>
                                </td>
                            </tr>
                            <tr data-category="平板" data-level="medium">
                                <td>
                                    <div style="display: flex; align-items: center; gap: 12px;">
                                        <div style="width: 50px; height: 50px; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center;">📱</div>
                                        <div>
                                            <div style="font-weight: 600;">HUAWEI MatePad 11</div>
                                            <div style="font-size: 12px; color: #6b7280;">128GB / 海岛蓝</div>
                                        </div>
                                    </div>
                                </td>
                                <td>HW-TABLET-003</td>
                                <td>平板</td>
                                <td>76</td>
                                <td>
                                    <div class="stock-level">
                                        <span class="status-badge status-info">库存中等</span>
                                        <div class="stock-bar">
                                            <div class="stock-fill medium" style="width: 45%"></div>
                                        </div>
                                    </div>
                                </td>
                                <td>2024-09-05</td>
                                <td>
                                    <button class="btn btn-outline btn-small" onclick="restockProduct('HW-TABLET-003')">🔄 补货</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <!-- 分页控件 -->
                    <div class="pagination">
                        <div class="pagination-info">
                            显示 <span style="color: #3b82f6; font-weight: 600;">1-3</span> 条，共 <span style="color: #3b82f6; font-weight: 600;">15</span> 条预警商品
                        </div>
                        <div class="pagination-controls">
                            <button class="btn btn-outline btn-small" disabled>← 上一页</button>
                            <button class="btn btn-primary btn-small" disabled>1</button>
                            <button class="btn btn-outline btn-small" onclick="changePage(2, 'inventory')">2</button>
                            <button class="btn btn-outline btn-small" onclick="changePage(3, 'inventory')">3</button>
                            <button class="btn btn-outline btn-small">...</button>
                            <button class="btn btn-outline btn-small" onclick="changePage(5, 'inventory')">5</button>
                            <button class="btn btn-outline btn-small" onclick="changePage(2, 'inventory')">下一页 →</button>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 4. 订单管理模块 -->
            <section id="orders" class="content-section">
                <div class="page-header">
                    <h1 class="page-title">订单管理</h1>
                    <div class="page-actions">
                        <button class="btn btn-outline">📤 导出订单</button>
                        <button class="btn btn-primary">🔍 高级搜索</button>
                    </div>
                </div>

                <!-- 订单列表表格 -->
                <div class="data-table-container">
                    <div class="table-header">
                        <h2 class="table-title">订单列表</h2>
                        <div class="table-filters">
                            <input type="text" class="filter-input" placeholder="搜索订单号/用户名..." oninput="filterOrders(this.value)">
                            <select class="filter-input" onchange="filterOrdersByStatus(this.value)">
                                <option value="all">全部状态</option>
                                <option value="pending">待付款</option>
                                <option value="paid">已付款</option>
                                <option value="shipped">已发货</option>
                                <option value="completed">已完成</option>
                                <option value="cancelled">已取消</option>
                            </select>
                            <select class="filter-input">
                                <option value="7days">最近7天</option>
                                <option value="30days">最近30天</option>
                                <option value="90days">最近90天</option>
                                <option value="custom">自定义</option>
                            </select>
                        </div>
                    </div>

                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>订单号</th>
                                <th>用户信息</th>
                                <th>商品</th>
                                <th>金额</th>
                                <th>下单时间</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="ordersTableBody">
                            <tr>
                                <td>HW20241214001</td>
                                <td>
                                    <div>user_847392</div>
                                    <div style="font-size: 12px; color: #6b7280;">138****5678</div>
                                </td>
                                <td>HUAWEI Mate 70 Pro</td>
                                <td>¥6,499</td>
                                <td>2024-09-18 10:23:45</td>
                                <td><span class="status-badge status-success">已发货</span></td>
                                <td>
                                    <button class="btn btn-outline btn-small" onclick="viewOrder('HW20241214001')">查看</button>
                                </td>
                            </tr>
                            <tr>
                                <td>HW20241214002</td>
                                <td>
                                    <div>user_756219</div>
                                    <div style="font-size: 12px; color: #6b7280;">139****8765</div>
                                </td>
                                <td>HUAWEI Watch GT 4</td>
                                <td>¥1,599</td>
                                <td>2024-09-18 09:15:32</td>
                                <td><span class="status-badge status-info">已付款</span></td>
                                <td>
                                    <button class="btn btn-outline btn-small" onclick="viewOrder('HW20241214002')">查看</button>
                                    <button class="btn btn-success btn-small" onclick="shipOrder('HW20241214002')">发货</button>
                                </td>
                            </tr>
                            <tr>
                                <td>HW20241214003</td>
                                <td>
                                    <div>user_635289</div>
                                    <div style="font-size: 12px; color: #6b7280;">137****4532</div>
                                </td>
                                <td>HUAWEI MateBook X Pro</td>
                                <td>¥8,999</td>
                                <td>2024-09-18 08:42:17</td>
                                <td><span class="status-badge status-warning">待付款</span></td>
                                <td>
                                    <button class="btn btn-outline btn-small" onclick="viewOrder('HW20241214003')">查看</button>
                                    <button class="btn btn-danger btn-small" onclick="cancelOrder('HW20241214003')">取消</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <!-- 分页控件 -->
                    <div class="pagination">
                        <div class="pagination-info">
                            显示 <span style="color: #3b82f6; font-weight: 600;">1-3</span> 条，共 <span style="color: #3b82f6; font-weight: 600;">1,247</span> 条订单
                        </div>
                        <div class="pagination-controls">
                            <button class="btn btn-outline btn-small" disabled>← 上一页</button>
                            <button class="btn btn-primary btn-small" disabled>1</button>
                            <button class="btn btn-outline btn-small" onclick="changePage(2, 'order')">2</button>
                            <button class="btn btn-outline btn-small" onclick="changePage(3, 'order')">3</button>
                            <button class="btn btn-outline btn-small">...</button>
                            <button class="btn btn-outline btn-small" onclick="changePage(416, 'order')">416</button>
                            <button class="btn btn-outline btn-small" onclick="changePage(2, 'order')">下一页 →</button>
                        </div>
                    </div>
                </div>
            </section>

  <!-- 业务监控模块 -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据监控与报表系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-gradient"></script>
    <style>
        :root {
            --primary: #3b82f6;
            --success: #22c55e;
            --warning: #f59e0b;
            --danger: #ef4444;
            --dark: #1f2937;
            --light: #f8fafc;
            --gray: #64748b;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f1f5f9;
            color: #334155;
            padding: 20px;
        }
        
        .content-section {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            padding: 24px;
            margin-bottom: 30px;
        }
        
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .page-title {
            font-size: 24px;
            font-weight: 600;
            color: var(--dark);
        }
        
        .page-actions {
            display: flex;
            gap: 12px;
        }
        
        .btn {
            padding: 10px 16px;
            border-radius: 8px;
            border: none;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .btn-primary {
            background-color: var(--primary);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #2563eb;
        }
        
        .btn-outline {
            background-color: transparent;
            border: 1px solid var(--gray);
            color: var(--gray);
        }
        
        .btn-outline:hover {
            background-color: #f1f5f9;
        }
        
        .btn-success {
            background-color: var(--success);
            color: white;
        }
        
        .btn-success:hover {
            background-color: #16a34a;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .stat-card {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: transform 0.2s ease;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
        }
        
        .stat-icon {
            font-size: 32px;
            margin-bottom: 12px;
        }
        
        .stat-value {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 8px;
            color: var(--dark);
        }
        
        .stat-label {
            font-size: 14px;
            color: var(--gray);
        }
        
        .charts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 24px;
        }
        
        .chart-container {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            position: relative;
        }
        
        .chart-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 16px;
            color: var(--dark);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .alert {
            padding: 16px;
            border-radius: 8px;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .alert-info {
            background-color: #dbeafe;
            color: #1e40af;
        }
        
        .alert-success {
            background-color: #dcfce7;
            color: #166534;
        }
        
        canvas {
            width: 100% !important;
            height: 300px !important;
        }
        
        .tooltip {
            position: absolute;
            background: rgba(31, 41, 55, 0.9);
            color: white;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 14px;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s;
            z-index: 100;
        }
        
        .chart-actions {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            gap: 8px;
        }
        
        .chart-btn {
            background: #f1f5f9;
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .chart-btn:hover {
            background: #e2e8f0;
        }
    </style>
</head>
<body>
    <!-- 业务监控模块 -->
    <section id="monitoring" class="content-section">
        <div class="page-header">
            <h1 class="page-title"><i class="fas fa-chart-line"></i> 业务监控</h1>
            <div class="page-actions">
                <button class="btn btn-outline"><i class="fas fa-chart-pie"></i> 生成报告</button>
                <button class="btn btn-primary" onclick="refreshMonitoring()"><i class="fas fa-sync-alt"></i> 实时刷新</button>
            </div>
        </div>

        <!-- 业务统计卡片 -->
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-users" style="color: #3b82f6;"></i></div>
                <div class="stat-value">12,583</div>
                <div class="stat-label">今日访问用户</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-shopping-cart" style="color: #22c55e;"></i></div>
                <div class="stat-value">¥256,892</div>
                <div class="stat-label">今日销售额</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-exchange-alt" style="color: #f59e0b;"></i></div>
                <div class="stat-value">4.82%</div>
                <div class="stat-label">转化率</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-clock" style="color: #ef4444;"></i></div>
                <div class="stat-value">2.3s</div>
                <div class="stat-label">平均响应时间</div>
            </div>
        </div>

        <!-- 监控图表 -->
        <div class="charts-grid">
            <div class="chart-container">
                <h3 class="chart-title"><i class="fas fa-traffic-light"></i> 流量来源分析</h3>
                <div class="chart-actions">
                    <button class="chart-btn" title="下载图表"><i class="fas fa-download"></i></button>
                    <button class="chart-btn" title="全屏查看"><i class="fas fa-expand"></i></button>
                </div>
                <canvas id="trafficSourceChart"></canvas>
            </div>
            <div class="chart-container">
                <h3 class="chart-title"><i class="fas fa-filter"></i> 销售漏斗</h3>
                <div class="chart-actions">
                    <button class="chart-btn" title="下载图表"><i class="fas fa-download"></i></button>
                    <button class="chart-btn" title="全屏查看"><i class="fas fa-expand"></i></button>
                </div>
                <canvas id="funnelChart"></canvas>
            </div>
            <div class="chart-container">
                <h3 class="chart-title"><i class="fas fa-map-marked-alt"></i> 地区分布</h3>
                <div class="chart-actions">
                    <button class="chart-btn" title="下载图表"><i class="fas fa-download"></i></button>
                    <button class="chart-btn" title="全屏查看"><i class="fas fa-expand"></i></button>
                </div>
                <canvas id="regionChart"></canvas>
            </div>
        </div>
    </section>

    <!-- 数据报表模块 -->
    <section id="reports" class="content-section">
        <div class="page-header">
            <h1 class="page-title"><i class="fas fa-file-alt"></i> 数据报表</h1>
            <div class="page-actions">
                <button class="btn btn-outline"><i class="fas fa-calendar-alt"></i> 选择日期</button>
                <button class="btn btn-success"><i class="fas fa-plus"></i> 生成自定义报表</button>
            </div>
        </div>
        <div class="alert alert-info">
            <i class="fas fa-info-circle"></i>
            <span>系统已自动生成每日、每周和每月销售报表，您可以查看历史报表或创建自定义报表。</span>
        </div>
        <div class="charts-grid">
            <div class="chart-container">
                <h3 class="chart-title"><i class="fas fa-chart-line"></i> 月度销售趋势</h3>
                <div class="chart-actions">
                    <button class="chart-btn" title="下载图表"><i class="fas fa-download"></i></button>
                    <button class="chart-btn" title="全屏查看"><i class="fas fa-expand"></i></button>
                </div>
                <canvas id="monthlySalesChart"></canvas>
            </div>
            <div class="chart-container">
                <h3 class="chart-title"><i class="fas fa-chart-pie"></i> 分类销售占比</h3>
                <div class="chart-actions">
                    <button class="chart-btn" title="下载图表"><i class="fas fa-download"></i></button>
                    <button class="chart-btn" title="全屏查看"><i class="fas fa-expand"></i></button>
                </div>
                <canvas id="categorySalesChart"></canvas>
            </div>
        </div>
    </section>

    <!-- 系统健康模块 -->
    <section id="health" class="content-section">
        <div class="page-header">
            <h1 class="page-title"><i class="fas fa-heartbeat"></i> 系统健康</h1>
            <div class="page-actions">
                <button class="btn btn-outline"><i class="fas fa-clipboard-list"></i> 查看日志</button>
                <button class="btn btn-primary" onclick="runDiagnostics()"><i class="fas fa-stethoscope"></i> 运行诊断</button>
            </div>
        </div>

        <div class="alert alert-success">
            <i class="fas fa-check-circle"></i>
            <span>系统整体状态良好，所有核心服务正常运行。最后检查时间：2024-09-18 15:30:22</span>
        </div>

        <!-- 系统健康统计卡片 -->
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-server" style="color: #3b82f6;"></i></div>
                <div class="stat-value">12/12</div>
                <div class="stat-label">服务器正常运行</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-database" style="color: #22c55e;"></i></div>
                <div class="stat-value">85%</div>
                <div class="stat-label">数据库连接池使用率</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-network-wired" style="color: #f59e0b;"></i></div>
                <div class="stat-value">98.7%</div>
                <div class="stat-label">网络可用性</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-hdd" style="color: #ef4444;"></i></div>
                <div class="stat-value">72%</div>
                <div class="stat-label">存储使用率</div>
            </div>
        </div>

        <!-- 系统健康图表 -->
        <div class="charts-grid">
            <div class="chart-container">
                <h3 class="chart-title"><i class="fas fa-microchip"></i> CPU 使用率</h3>
                <div class="chart-actions">
                    <button class="chart-btn" title="下载图表"><i class="fas fa-download"></i></button>
                    <button class="chart-btn" title="全屏查看"><i class="fas fa-expand"></i></button>
                </div>
                <canvas id="cpuChart"></canvas>
            </div>
            <div class="chart-container">
                <h3 class="chart-title"><i class="fas fa-memory"></i> 内存占用率</h3>
                <div class="chart-actions">
                    <button class="chart-btn" title="下载图表"><i class="fas fa-download"></i></button>
                    <button class="chart-btn" title="全屏查看"><i class="fas fa-expand"></i></button>
                </div>
                <canvas id="memoryChart"></canvas>
            </div>
            <div class="chart-container">
                <h3 class="chart-title"><i class="fas fa-tachometer-alt"></i> 响应时间趋势</h3>
                <div class="chart-actions">
                    <button class="chart-btn" title="下载图表"><i class="fas fa-download"></i></button>
                    <button class="chart-btn" title="全屏查看"><i class="fas fa-expand"></i></button>
                </div>
                <canvas id="responseTimeChart"></canvas>
            </div>
        </div>
    </section>

    <script>
        // 注册插件
        Chart.register(ChartDataLabels);
        
        // 全局图表配置
        Chart.defaults.font.family = "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif";
        Chart.defaults.color = '#64748b';
        Chart.defaults.plugins.tooltip.backgroundColor = 'rgba(31, 41, 55, 0.9)';
        Chart.defaults.plugins.tooltip.padding = 12;
        Chart.defaults.plugins.tooltip.cornerRadius = 6;
        Chart.defaults.plugins.legend.labels.boxWidth = 16;
        Chart.defaults.plugins.legend.labels.usePointStyle = true;
        
        // 流量来源分析 (饼图)
        const trafficSourceChart = new Chart(document.getElementById('trafficSourceChart'), {
            type: 'doughnut',
            data: {
                labels: ['搜索引擎', '社交媒体', '直接访问', '广告投放', '邮件营销', '外部链接'],
                datasets: [{
                    data: [35, 22, 18, 12, 8, 5],
                    backgroundColor: [
                        '#3b82f6', '#22c55e', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4'
                    ],
                    borderWidth: 0,
                    hoverOffset: 12
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'right',
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `${context.label}: ${context.parsed}%`;
                            }
                        }
                    },
                    datalabels: {
                        color: '#fff',
                        font: {
                            weight: 'bold'
                        },
                        formatter: (value) => value + '%'
                    }
                },
                cutout: '65%'
            }
        });

        // 销售漏斗 (水平条形图)
        const funnelChart = new Chart(document.getElementById('funnelChart'), {
            type: 'bar',
            data: {
                labels: ['浏览商品', '加入购物车', '开始结算', '填写信息', '支付成功'],
                datasets: [{
                    label: '用户数量',
                    data: [10000, 4500, 3000, 2200, 1800],
                    backgroundColor: [
                        'rgba(59, 130, 246, 0.8)',
                        'rgba(34, 197, 94, 0.8)',
                        'rg59, 130, 246, 0.8)',
                        'rgba(245, 158, 11, 0.8)',
                        'rgba(239, 68, 68, 0.8)'
                    ],
                    borderColor: [
                        'rgb(59, 130, 246)',
                        'rgb(34, 197, 94)',
                        'rgb(59, 130, 246)',
                        'rgb(245, 158, 11)',
                        'rgb(239, 68, 68)'
                    ],
                    borderWidth: 1,
                    borderRadius: 6,
                    barPercentage: 0.6,
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `用户数: ${context.parsed.x.toLocaleString()}`;
                            }
                        }
                    },
                    datalabels: {
                        anchor: 'end',
                        align: 'end',
                        color: '#64748b',
                        font: {
                            weight: 'bold'
                        },
                        formatter: (value) => value.toLocaleString()
                    }
                },
                scales: {
                    x: {
                        grid: {
                            drawBorder: false
                        },
                        ticks: {
                            callback: function(value) {
                                return value.toLocaleString();
                            }
                        }
                    },
                    y: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });

        // 地区分布 (柱状图)
        const regionChart = new Chart(document.getElementById('regionChart'), {
            type: 'bar',
            data: {
                labels: ['华东', '华南', '华北', '西部', '东北', '中部', '西南'],
                datasets: [{
                    label: '销售额 (万元)',
                    data: [1850, 1420, 1260, 980, 750, 620, 540],
                    backgroundColor: 'rgba(59, 130, 246, 0.7)',
                    borderColor: 'rgb(59, 130, 246)',
                    borderWidth: 1,
                    borderRadius: 6,
                    barPercentage: 0.6,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `销售额: ${context.parsed.y} 万元`;
                            }
                        }
                    },
                    datalabels: {
                        anchor: 'end',
                        align: 'top',
                        color: '#64748b',
                        font: {
                            weight: 'bold'
                        },
                        formatter: (value) => value + '万'
                    }
                },
                scales: {
                    y: {
                        grid: {
                            drawBorder: false
                        },
                        beginAtZero: true
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });

        // 月度销售趋势 (折线图)
        const monthlySalesChart = new Chart(document.getElementById('monthlySalesChart'), {
            type: 'line',
            data: {
                labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                datasets: [{
                    label: '销售额 (万元)',
                    data: [520, 680, 750, 820, 950, 1120, 1260, 1180, 1340, 1420, 1580, 1820],
                    borderColor: 'rgb(59, 130, 246)',
                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
                    borderWidth: 3,
                    pointRadius: 5,
                    pointHoverRadius: 8,
                    pointBackgroundColor: 'rgb(59, 130, 246)',
                    fill: true,
                    tension: 0.3
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `销售额: ${context.parsed.y} 万元`;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        grid: {
                            drawBorder: false
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });

        // 分类销售占比 (环形图)
        const categorySalesChart = new Chart(document.getElementById('categorySalesChart'), {
            type: 'doughnut',
            data: {
                labels: ['手机', '平板', '笔记本', '配件', '智能家居', '穿戴设备'],
                datasets: [{
                    data: [32, 18, 22, 12, 9, 7],
                    backgroundColor: [
                        '#3b82f6', '#22c55e', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4'
                    ],
                    borderWidth: 0,
                    hoverOffset: 12
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'right',
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `${context.label}: ${context.parsed}%`;
                            }
                        }
                    },
                    datalabels: {
                        color: '#fff',
                        font: {
                            weight: 'bold'
                        },
                        formatter: (value) => value + '%'
                    }
                },
                cutout: '65%'
            }
        });

        // CPU 使用率 (折线图)
        const cpuChart = new Chart(document.getElementById('cpuChart'), {
            type: 'line',
            data: {
                labels: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
                datasets: [{
                    label: 'CPU (%)',
                    data: [32, 28, 35, 45, 62, 58, 48, 40],
                    borderColor: 'rgb(239, 68, 68)',
                    backgroundColor: 'rgba(239, 68, 68, 0.1)',
                    borderWidth: 3,
                    pointRadius: 5,
                    pointHoverRadius: 8,
                    pointBackgroundColor: 'rgb(239, 68, 68)',
                    fill: true,
                    tension: 0.3
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `使用率: ${context.parsed.y}%`;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        min: 0,
                        max: 100,
                        grid: {
                            drawBorder: false
                        },
                        ticks: {
                            callback: function(value) {
                                return value + '%';
                            }
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });

        // 内存占用率 (环形图)
        const memoryChart = new Chart(document.getElementById('memoryChart'), {
            type: 'doughnut',
            data: {
                labels: ['已用内存', '可用内存'],
                datasets: [{
                    data: [68, 32],
                    backgroundColor: [
                        'rgba(59, 130, 246, 0.8)',
                        'rgba(226, 232, 240, 0.8)'
                    ],
                    borderWidth: 0,
                    hoverOffset: 12
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `${context.label}: ${context.parsed}%`;
                            }
                        }
                    },
                    datalabels: {
                        color: '#1f2937',
                        font: {
                            weight: 'bold',
                            size: 16
                        },
                        formatter: (value) => value + '%'
                    }
                },
                cutout: '75%'
            }
        });

        // 响应时间趋势 (折线图)
        const responseTimeChart = new Chart(document.getElementById('responseTimeChart'), {
            type: 'line',
            data: {
                labels: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
                datasets: [{
                    label: '响应时间 (ms)',
                    data: [120, 110, 105, 130, 180, 165, 145, 125],
                    borderColor: 'rgb(245, 158, 11)',
                    backgroundColor: 'rgba(245, 158, 11, 0.1)',
                    borderWidth: 3,
                    pointRadius: 5,
                    pointHoverRadius: 8,
                    pointBackgroundColor: 'rgb(245, 158, 11)',
                    fill: true,
                    tension: 0.3
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `响应时间: ${context.parsed.y}ms`;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        grid: {
                            drawBorder: false
                        },
                        ticks: {
                            callback: function(value) {
                                return value + 'ms';
                            }
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });

        // 刷新按钮逻辑
        function refreshMonitoring() {
            const Toast = {
                init() {
                    this.hideTimeout = null;
                    
                    this.el = document.createElement('div');
                    this.el.className = 'toast';
                    document.body.appendChild(this.el);
                },
                
                show(message, state) {
                    clearTimeout(this.hideTimeout);
                    
                    this.el.textContent = message;
                    this.el.className = 'toast toast--visible';
                    if (state) {
                        this.el.classList.add(`toast--${state}`);
                    }
                    
                    this.hideTimeout = setTimeout(() => {
                        this.el.classList.remove('toast--visible');
                    }, 3000);
                }
            };
            
            document.addEventListener('DOMContentLoaded', () => {
                Toast.init();
            });
            
            Toast.show('📡 数据已刷新至最新状态', 'success');
        }

        // 运行诊断按钮
        function runDiagnostics() {
            alert("🔍 正在运行系统诊断，请稍候...");
            // 这里可以加 Ajax 请求诊断结果
        }
        
        // 添加tooltip
        document.querySelectorAll('.chart-btn').forEach(button => {
            button.addEventListener('mouseover', function(e) {
                const tooltip = document.createElement('div');
                tooltip.className = 'tooltip';
                tooltip.textContent = this.getAttribute('title');
                document.body.appendChild(tooltip);
                
                const rect = this.getBoundingClientRect();
                tooltip.style.left = rect.left + rect.width/2 - tooltip.offsetWidth/2 + 'px';
                tooltip.style.top = rect.top - tooltip.offsetHeight - 5 + 'px';
                tooltip.style.opacity = '1';
                
                this.tooltip = tooltip;
            });
            
            button.addEventListener('mouseout', function() {
                if (this.tooltip) {
                    this.tooltip.remove();
                }
            });
        });
    </script>


<!-- 8. 备份管理模块 -->
<section id="backup" class="content-section">
  <div class="page-header">
    <h1 class="page-title">备份管理</h1>
    <div class="page-actions">
      <button class="btn btn-outline">📋 备份策略</button>
      <button class="btn btn-success" onclick="showModal('createBackupModal')">➕ 创建备份</button>
    </div>
  </div>
  <div class="data-table-container">
    <div class="table-header"><h2 class="table-title">备份历史记录</h2></div>
    <table class="data-table">
      <thead><tr><th>备份名称</th><th>类型</th><th>大小</th><th>状态</th><th>操作</th></tr></thead>
      <tbody>
        <tr>
          <td>backup-20240918-full</td><td>全量备份</td><td>128.5 GB</td>
          <td><span class="status-badge status-success">完成</span></td>
          <td><button class="btn btn-outline btn-small">下载</button><button class="btn btn-outline btn-small">恢复</button></td>
        </tr>
        <tr>
          <td>backup-20240919-incremental</td><td>增量备份</td><td>2.3 GB</td>
          <td><span class="status-badge status-warning">进行中</span></td>
          <td><button class="btn btn-outline btn-small">校验</button><button class="btn btn-outline btn-small">取消</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

<!-- 9. 灾难演练模块 -->
<section id="disaster" class="content-section">
  <div class="page-header">
    <h1 class="page-title">灾难演练</h1>
    <div class="page-actions">
      <button class="btn btn-outline">📋 演练计划</button>
      <button class="btn btn-success" onclick="showModal('startDrillModal')">▶️ 启动演练</button>
    </div>
  </div>
  <div class="alert alert-info">
    <span>ℹ️</span>
    <span>系统每季度自动执行一次灾难恢复演练，上次演练时间：2024-06-30，状态：成功。</span>
  </div>
  <div class="data-table-container">
    <div class="table-header"><h2 class="table-title">演练记录</h2></div>
    <table class="data-table">
      <thead><tr><th>演练名称</th><th>类型</th><th>执行时间</th><th>结果</th><th>耗时</th></tr></thead>
      <tbody>
        <tr><td>drill-20240901-db</td><td>数据库恢复</td><td>2024-09-01</td><td><span class="status-badge status-success">成功</span></td><td>12分45秒</td></tr>
        <tr><td>drill-20240630-net</td><td>网络中断</td><td>2024-06-30</td><td><span class="status-badge status-success">成功</span></td><td>8分10秒</td></tr>
      </tbody>
    </table>
  </div>
</section>

<!-- 10. 系统设置模块 -->
<section id="settings" class="content-section">
  <div class="page-header">
    <h1 class="page-title">系统设置</h1>
    <div class="page-actions">
      <button class="btn btn-outline">🔄 重置设置</button>
      <button class="btn btn-primary">💾 保存设置</button>
    </div>
  </div>
  <div class="data-table-container">
    <div class="table-header"><h2 class="table-title">基础设置</h2></div>
    <div style="padding:20px;">
      <div class="form-grid">
        <div class="form-group"><label class="form-label">系统名称</label><input type="text" class="form-input" value="华为全球商城管理后台"></div>
        <div class="form-group"><label class="form-label">默认语言</label><select class="form-select"><option value="zh-CN" selected>简体中文</option><option value="en-US">English</option><option value="ja-JP">日本語</option></select></div>
        <div class="form-group"><label class="form-label">自动备份频率</label><select class="form-select"><option value="daily" selected>每日</option><option value="weekly">每周</option><option value="monthly">每月</option></select></div>
        <div class="form-group"><label class="form-label">库存预警阈值</label><input type="number" class="form-input" value="50"></div>
        <div class="form-group"><label class="form-label">系统主题</label><select class="form-select"><option value="light" selected>浅色主题</option><option value="dark">深色主题</option></select></div>
        <div class="form-group"><label class="form-label">安全策略</label><select class="form-select"><option value="weak">低（仅密码）</option><option value="medium" selected>中（密码+邮箱验证）</option><option value="high">高（双因子认证）</option></select></div>
      </div>
    </div>
  </div>
</section>

<!-- 模态框：自定义报表 -->
<div id="customReportModal" class="modal-overlay">
  <div class="modal">
    <div class="modal-header">
      <h3 class="modal-title">生成自定义报表</h3>
      <button class="modal-close" onclick="hideModal('customReportModal')">&times;</button>
    </div>
    <div class="form-grid">
      <div class="form-group"><label class="form-label">报表类型</label><select class="form-select"><option value="sales">销售报表</option><option value="inventory">库存报表</option><option value="finance">财务报表</option></select></div>
      <div class="form-group"><label class="form-label">时间范围</label><input type="date" class="form-input"> 至 <input type="date" class="form-input"></div>
      <div class="form-group"><label class="form-label">输出格式</label><select class="form-select"><option>Excel</option><option>PDF</option><option>CSV</option></select></div>
    </div>
    <div class="modal-footer"><button class="btn btn-outline" onclick="hideModal('customReportModal')">取消</button><button class="btn btn-success">生成</button></div>
  </div>
</div>

<!-- 模态框：创建备份 -->
<div id="createBackupModal" class="modal-overlay">
  <div class="modal">
    <div class="modal-header"><h3 class="modal-title">创建新备份</h3><button class="modal-close" onclick="hideModal('createBackupModal')">&times;</button></div>
    <div class="form-grid">
      <div class="form-group"><label class="form-label">备份类型</label><select class="form-select"><option value="full">全量备份</option><option value="incremental">增量备份</option></select></div>
      <div class="form-group"><label class="form-label">存储位置</label><select class="form-select"><option value="local">本地服务器</option><option value="cloud">云存储</option></select></div>
    </div>
    <div class="modal-footer"><button class="btn btn-outline" onclick="hideModal('createBackupModal')">取消</button><button class="btn btn-success">开始备份</button></div>
  </div>
</div>

<!-- 模态框：启动演练 -->
<div id="startDrillModal" class="modal-overlay">
  <div class="modal">
    <div class="modal-header"><h3 class="modal-title">启动灾难演练</h3><button class="modal-close" onclick="hideModal('startDrillModal')">&times;</button></div>
    <div class="form-grid">
      <div class="form-group"><label class="form-label">演练类型</label><select class="form-select"><option>数据库恢复</option><option>网络中断</option><option>服务器宕机</option></select></div>
      <div class="form-group"><label class="form-label">执行人</label><input type="text" class="form-input" placeholder="输入执行人姓名"></div>
    </div>
    <div class="modal-footer"><button class="btn btn-outline" onclick="hideModal('startDrillModal')">取消</button><button class="btn btn-success">启动演练</button></div>
  </div>
</div>

    <!-- 其他必要模态框（批量补货、自定义报表等）结构类似，这里省略 -->

    <script>
        // 页面切换功能
        function showSection(sectionId, menuItem, breadcrumbText) {
            // 隐藏所有内容区域
            document.querySelectorAll('.content-section').forEach(section => {
                section.classList.remove('active');
            });
            
            // 显示选中的内容区域
            document.getElementById(sectionId).classList.add('active');
            
            // 更新菜单激活状态
            document.querySelectorAll('.menu-item').forEach(item => {
                item.classList.remove('active');
            });
            menuItem.classList.add('active');
            
            // 更新面包屑导航
            document.getElementById('breadcrumb').textContent = breadcrumbText;
        }

        // 模态框控制
        function showModal(modalId) {
            document.getElementById(modalId).classList.add('show');
        }

        function hideModal(modalId) {
            document.getElementById(modalId).classList.remove('show');
        }

        // 点击模态框外部关闭
        document.querySelectorAll('.modal-overlay').forEach(overlay => {
            overlay.addEventListener('click', function(e) {
                if (e.target === this) {
                    this.classList.remove('show');
                }
            });
        });

        // 活动筛选
        function filterActivities(keyword) {
            const rows = document.querySelectorAll('#activitiesTableBody tr');
            keyword = keyword.toLowerCase();
            
            rows.forEach(row => {
                const text = row.textContent.toLowerCase();
                row.style.display = text.includes(keyword) ? '' : 'none';
            });
        }

        // 商品筛选
        function filterProducts(keyword) {
            const rows = document.querySelectorAll('#productTableBody tr');
            keyword = keyword.toLowerCase();
            
            rows.forEach(row => {
                const text = row.textContent.toLowerCase();
                row.style.display = text.includes(keyword) ? '' : 'none';
            });
        }

        // 按分类筛选商品
        function filterByCategory(category) {
            const rows = document.querySelectorAll('#productTableBody tr');
            
            rows.forEach(row => {
                if (category === 'all' || row.dataset.category === category) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        }

        // 按状态筛选商品
        function filterByStatus(status) {
            const rows = document.querySelectorAll('#productTableBody tr');
            
            rows.forEach(row => {
                if (status === 'all' || row.dataset.status === status) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        }

        // 库存筛选
        function filterInventory(keyword) {
            const rows = document.querySelectorAll('#inventoryTableBody tr');
            keyword = keyword.toLowerCase();
            
            rows.forEach(row => {
                const text = row.textContent.toLowerCase();
                row.style.display = text.includes(keyword) ? '' : 'none';
            });
        }

        // 按分类筛选库存
        function filterInventoryByCategory(category) {
            const rows = document.querySelectorAll('#inventoryTableBody tr');
            
            rows.forEach(row => {
                if (category === 'all' || row.dataset.category === category) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        }

        // 按库存级别筛选
        function filterInventoryByLevel(level) {
            const rows = document.querySelectorAll('#inventoryTableBody tr');
            
            rows.forEach(row => {
                if (level === 'all' || row.dataset.level === level) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        }
        

        // 订单筛选
        function filterOrders(keyword) {
            const rows = document.querySelectorAll('#ordersTableBody tr');
            keyword = keyword.toLowerCase();
            
            rows.forEach(row => {
                const text = row.textContent.toLowerCase();
                row.style.display = text.includes(keyword) ? '' : 'none';
            });
        }

        // 按状态筛选订单
        function filterOrdersByStatus(status) {
            const rows = document.querySelectorAll('#ordersTableBody tr');
            
            rows.forEach(row => {
                if (status === 'all') {
                    row.style.display = '';
                    return;
                }
                
                const statusText = row.querySelector('.status-badge').textContent;
                let rowStatus = '';
                
                switch(statusText) {
                    case '待付款': rowStatus = 'pending'; break;
                    case '已付款': rowStatus = 'paid'; break;
                    case '已发货': rowStatus = 'shipped'; break;
                    case '已完成': rowStatus = 'completed'; break;
                    case '已取消': rowStatus = 'cancelled'; break;
                }
                
                row.style.display = rowStatus === status ? '' : 'none';
            });
        }
        

        // 分页功能
        function changePage(pageNum, type) {
            // 实际项目中这里会加载对应页的数据
            alert(`切换到第 ${pageNum} 页（${type}列表）`);
        }

        // 商品操作
        function editProduct(sku) {
            alert(`编辑商品: ${sku}`);
            showModal('addProductModal'); // 复用添加商品模态框作为编辑框
        }

        function changeStatus(sku, status) {
            alert(`将商品 ${sku} 状态改为: ${status}`);
        }

        function restockProduct(sku) {
            alert(`为商品 ${sku} 补货`);
        }

        // 订单操作
        function viewOrder(orderId) {
            alert(`查看订单详情: ${orderId}`);
        }

        function shipOrder(orderId) {
            alert(`订单 ${orderId} 已发货`);
        }

        function cancelOrder(orderId) {
            alert(`订单 ${orderId} 已取消`);
        }
        function handleLogout() {
            // 弹出确认框
            const isConfirm = confirm("确定要退出登录吗？");
            // 确认后跳转至login.html
            if (isConfirm) {
                window.location.href = "login.html";
            }
        }
    </script>
</body>
</html>
